<template>
	<div class="lesson-graph-page">
		<div class="page-header">
			<div class="page-header-title">
				<span class="back-course-graph" @click="goToCourseGraphPage">
					<el-icon>
						<ArrowLeftBold />
					</el-icon>
				</span>
				<div class="lesson-info">
					<span class="lesson-name" :title="lessonInfo?.name || '未知课堂'">{{
						lessonInfo?.name || '未知课堂'
					}}</span>
					<span class="lesson-teacher" :title="lessonInfo?.teacherNames || '未知老师'">{{
						lessonInfo?.teacherNames || '未知老师'
					}}</span>
					<span
						class="lesson-teaching-class"
						:title="lessonInfo?.teachingClassName || '未知班级'"
						>{{ lessonInfo?.teachingClassName || '未知班级' }}</span
					>
					<span class="lesson-term" :title="lessonInfo?.termName || '未知学期'">{{
						lessonInfo?.termName || '未知学期'
					}}</span>
				</div>
			</div>
			<div class="page-header-menu-list">
				<span
					class="page-header-menu-item"
					:class="{ active: activeMenu === 'LessonTeachingGraph' }"
					@click="gotoLessonTeachingGraphPage"
					>教学图谱</span
				>
				<span
					class="page-header-menu-item"
					:class="{ active: activeMenu === 'LessonAnalysisDetails' }"
					@click="gotoLessonAnalysisDetailPage"
					>分析详情</span
				>
			</div>
			<div class="other-content">
				<div class="link-btn">查看分析过程</div>
			</div>
		</div>
		<div class="page-content">
			<router-view :lesson-info="lessonInfo"></router-view>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeftBold } from '@element-plus/icons-vue';
import { getCourseListAPI, getErrorMessage } from '@/api/index';
import type { CourseListItemType } from './LessonGraph.type';

const route = useRoute();
const router = useRouter();
const activeMenu = ref(route.name);

// 课程信息
const lessonInfo = ref<CourseListItemType | null>(null);

onMounted(() => {
	if (route.query.lessonCode) {
		getCourseList();
	}
});

// 获取课程详情
const getCourseList = async () => {
	try {
		const data = await getCourseListAPI({
			codes: route.query.lessonCode as string
		});

		lessonInfo.value = data.list[0] || null;

		if (lessonInfo.value) {
			lessonInfo.value.endOrder = lessonInfo.value.endOrder || lessonInfo.value.beginOrder;
		}
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};

// 去分析详情页面
const gotoLessonAnalysisDetailPage = () => {
	activeMenu.value = 'LessonAnalysisDetails';
	router.push({
		name: 'LessonAnalysisDetails',
		query: {
			lessonCode: route.query.lessonCode
		}
	});
};

// 去课堂教学图谱页面
const gotoLessonTeachingGraphPage = () => {
	activeMenu.value = 'LessonTeachingGraph';
	router.push({
		name: 'LessonTeachingGraph',
		query: {
			lessonCode: route.query.lessonCode
		}
	});
};

// 返回课程图谱
const goToCourseGraphPage = () => {
	if (route.query.from === 'taskManage') {
		router.push({
			name: 'AnalysisTaskManage'
		});
	} else {
		router.push({
			name: 'CourseGraph',
			query: {
				courseCode: lessonInfo.value?.courseCode || ''
			}
		});
	}
};
</script>
<style scoped lang="scss">
.lesson-graph-page {
	height: 100%;
}
.page-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 7.2rem;
	padding-left: 3rem;
	padding-right: 3rem;
	background: url('@/assets/images/header-bg.png') no-repeat center top/100% 100%;

	.page-header-title {
		display: flex;
		align-items: center;
		width: 42%;
		white-space: nowrap;
		color: #fff;

		.back-course-graph {
			display: inline-block;
			font-size: $font-size-large-3;
			line-height: 0;
			padding-right: 1rem;
			cursor: pointer;

			&:hover {
				color: color.adjust($color-brand, $lightness: -30%);
			}
		}

		.lesson-info {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;

			.lesson-name {
				font-size: $font-size-large-3;
				padding-right: 1.4rem;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.lesson-teacher,
			.lesson-teaching-class,
			.lesson-term {
				position: relative;
				padding-left: 1.4rem;
				padding-right: 1.4rem;
				font-size: $font-size-base;
				overflow: hidden;
				text-overflow: ellipsis;

				&::before {
					display: block;
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					width: 1px;
					height: $font-size-base;
					background-color: #fff;
					transform: translateY(-50%);
				}
			}

			.lesson-name {
				max-width: 45%;
			}

			.lesson-teacher {
				max-width: 20%;
			}

			.lesson-teaching-class {
				max-width: 20%;
			}

			.lesson-term {
				max-width: 15%;
			}
		}
	}

	.page-header-menu-list {
		position: absolute;
		top: 0;
		left: 50%;
		display: flex;
		align-items: center;
		height: 100%;
		transform: translateX(-50%);

		.page-header-menu-item {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 1rem 2rem;
			font-size: $font-size-large-1;
			color: #fff;
			cursor: pointer;

			&:hover {
				background-color: rgba(color.adjust($color-brand, $lightness: -30%), 0.5);
			}
		}

		.page-header-menu-item.active {
			color: #fff;
			background-color: rgba(color.adjust($color-brand, $lightness: -30%), 0.5);
		}
	}

	.other-content {
		display: flex;
		align-items: center;

		.link-btn {
			font-size: $font-size-base;
			text-decoration: underline;
			color: #fff;
			cursor: pointer;
		}
	}
}

.page-content {
	height: calc(100% - 7.2rem);
}
</style>
